<template>
    <!-- homeSub/pages/messageCenter/messageCenter.wxml -->
    <!-- wx:if="{{loading}}" -->
    <view>
        <view v-if="messageList.length">
            <view class="message-list">
                <view
                    class="message-list-item"
                    :data-type="item.type"
                    :data-relationId="item.relationId"
                    :data-id="item.id"
                    :data-index="index"
                    :data-isNewType="item.isNewType"
                    @tap="naviTo"
                    v-for="(item, index) in messageList"
                    :key="index"
                >
                    <view class="message-list-header">
                        <view class="message-list-header-left">
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/system.png" alt="" class="message-list-icon" v-if="item.type == 0" />
                            <image
                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/notices.png"
                                alt=""
                                class="message-list-icon"
                                v-if="item.type == 1"
                            />
                            <image
                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/Coupons.png"
                                alt=""
                                class="message-list-icon"
                                v-if="item.type == 2"
                            />
                            <image
                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/feedback.png"
                                alt=""
                                class="message-list-icon"
                                v-if="item.type == 3"
                            />

                            <image
                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/message/Notice.png"
                                alt=""
                                class="message-list-icon"
                                v-if="item.type == 'T101' || item.type == 'T102'"
                            />
                            <image
                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/message/pt.png"
                                alt=""
                                class="message-list-icon"
                                v-if="item.type == 'T201' || item.type == 'T202' || item.type == 'T203'"
                            />
                            <image
                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/message/activity.png"
                                alt=""
                                class="message-list-icon"
                                v-if="item.type == 'T301' || item.type == 'T302'"
                            />
                            <image
                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/message/member-icon.png"
                                alt=""
                                class="message-list-icon"
                                v-if="item.type == 'T401'"
                            />
                            <image
                                src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/message/vip-icon.png"
                                alt=""
                                class="message-list-icon"
                                v-if="item.type == 'T402'"
                            />

                            <text class="icon-badge" v-if="item.isRead == 0 || item.readStatus == 1"></text>
                            <text class="message-list-title">{{ item.title }}</text>
                            <view class="message-list-time">{{ item.createTime }}</view>
                        </view>
                    </view>

                    <view class="message-list-content">{{ item.content }}</view>
                </view>
            </view>
            <!-- <view class="loading" wx:if="{{loading}}"><van-loading type="spinner" size="40rpx"/></view> -->
            <view class="read" @tap.stop.prevent="read" v-if="messageList.length && readStatus">
                <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/Read.png" class="read-icon"></image>
                <view class="read-text">一键已读</view>
            </view>
        </view>
        <view v-else>
            <Upgrading text="暂无内容"></Upgrading>
        </view>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
import Upgrading from '../../../components/upgrading/upgrading';
// import vanLoading from './@vant/weapp/loading/index';
// homeSub/pages/messageCenter/messageCenter.ts
const app = getApp();
import { messagePage, messageRead, isRread, myBillDetails } from '../../../api/https';
import { getMessagePageApi, getMessageReadApi, getMessageReadAllApi, getMessageStatus } from '../../../api/marketing/messageApi';
export default {
    components: {
        Upgrading,
        // vanLoading
    },
    data() {
        return {
            messageList: [],
            page: 1,
            pageNum: 0,
            readStatus: true,
            loading: false,

            // 订单状态
            orderStatus: [
                {
                    state: '1',
                    val: 1
                },
                {
                    state: '2',
                    val: 1
                },
                {
                    state: '3',
                    val: 1
                },
                {
                    state: '4',
                    val: 1
                },
                {
                    state: '5',
                    val: 1
                },
                {
                    state: '6',
                    val: 1
                },
                {
                    state: '7',
                    val: 1
                },
                {
                    state: '8',
                    val: 1
                },
                {
                    state: '9',
                    val: 1
                },
                {
                    state: '10',
                    val: 2
                },
                {
                    state: '11',
                    val: 2
                },
                {
                    state: '12',
                    val: 2
                },
                {
                    state: '13',
                    val: 2
                },
                {
                    state: '14',
                    val: 3
                },
                {
                    state: '15',
                    val: 2
                },
                {
                    state: '16',
                    val: 4
                },
                {
                    state: '17',
                    val: 3
                },
                {
                    state: '18',
                    val: 4
                }
            ],

            newMessageList: [],
            oldMessageList: [],
            oldStatus: false,
            newStatus: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
		if(!uni.getStorageSync('token')){
			return
		}
        this.getMessagePage(2);
        if (this.marketingSwitch) {    
			console.log('营销获客正常,走外包8081逻辑');
			this.getIsReadYx();
        } else {
            console.log('营销获客挂了,走7100逻辑');
            this.getIsRead();
        }
    },
    onShow() {},
    methods: {
        naviTo(e: any) {
            //     const {currentTarget:{dataset:{index,type,relationid,id,isNewType,relevantId}}} = e
            const { index, type, relationid, id, isNewType, groupId, activityId } = e.currentTarget.dataset;
            // const {currentTarget:{dataset:{type}}} = e
            // const {currentTarget:{dataset:{relationid}}} = e
            // const {currentTarget:{dataset:{id}}} = e
            // const {currentTarget:{dataset:{isNewType}}} = e
            // this.setData({
            //     page: 1
            // })
            switch (type) {
                case 0:
                    this.check(relationid, id);
                    // this.singleRead(id)
                    break;
                case 1:
                    this.singleRead(id);
                    uni.navigateTo({
                        url: '../../pages/platformAnnouncement/platformAnnouncement?id=' + relationid
                    });
                    break;
                case 2:
                    this.singleRead(id);
                    // wx.navigateTo({
                    //     url:'../../../mine/pages/cardVoucher/cardVoucher'

                    // })
                    //正常去营销获客卡券
                    this.goYxhkCard();
                    break;
                case 3:
                    this.singleRead(id);
                    uni.navigateTo({
                        url: '../../pages/feedbackDetails/feedbackDetails?id=' + relationid
                    });
                    break;
                case 'T101':
                    this.singleReadNew(id);
                    uni.navigateTo({
                        url: '../../../marketing_page/pages/promotion/index/index'
                    });
                    console.log('跳转----会员推广-审核通过');
                    break;
                case 'T102':
                    this.singleReadNew(id);

                    //   跳转审核不通过信息
                    //   wx.navigateTo({
                    //     url: '../../../marketing_page/pages/promotion/apply/details'
                    //   });

                    //跳转招募计划
                    uni.navigateTo({
                        url: '../../../marketing_page/pages/promotion/recruit_plan/recruit_plan'
                    });
                    console.log('跳转----招募计划-审核不通过');
                    break;
                case 'T201':
                    this.singleReadNew(id);
                    uni.navigateTo({
                        url: '../../../marketing_page/pages/group/list/index'
                    });
                    console.log('跳转----我的拼团');

                    //   groupId=1565953143559184385&activityId=1565944702262435841
                    //   wx.navigateTo({
                    //     url: `../../../marketing_page/pages/group/detail/index?groupId=${groupId}&activityId=${activityId}`
                    //   });
                    //   console.log('跳转----我的拼团-团的详情页')
                    break;
                case 'T202':
                    this.singleReadNew(id);
                    uni.navigateTo({
                        url: '../../../marketing_page/pages/group/list/index'
                    });
                    console.log('跳转----我的拼团');

                    //   wx.navigateTo({
                    //     url: `../../../marketing_page/pages/group/detail/index?groupId=${groupId}&activityId=${activityId}`
                    //   });
                    //   console.log('跳转----我的拼团-团的详情页')
                    break;
                case 'T203':
                    this.singleReadNew(id);
                    uni.navigateTo({
                        url: '../../../marketing_page/pages/group/list/index'
                    });
                    console.log('跳转----我的拼团');
                    //   wx.navigateTo({
                    //     url: `../../../marketing_page/pages/group/detail/index?groupId=${groupId}&activityId=${activityId}`
                    //   });
                    //   console.log('跳转----我的拼团-团的详情页')
                    break;
                case 'T301':
                    this.singleReadNew(id);
                    //   wx.navigateTo({
                    //     url: '../../../mine/pages/cardVoucher/cardVoucher'
                    //   });
                    //正常去营销获客卡券
                    this.goYxhkCard();
                    console.log('跳转----我的>卡券列表');
                    break;
                case 'T302':
                    this.singleReadNew(id);
                    //   wx.navigateTo({
                    //     url: '../../../mine/pages/cardVoucher/cardVoucher'
                    //   });
                    //正常去营销获客卡券
                    this.goYxhkCard();
                    console.log('跳转----我的>卡券列表');
                    break;
                case 'T401':
                    this.singleReadNew(id);
                    uni.navigateTo({
                        url: '../../../mine/pages/vip/vip'
                    });
                    console.log('跳转----我的-成长等级会员');
                    break;
                case 'T402':
                    this.singleReadNew(id);
                    uni.navigateTo({
                        // url: '../../../marketing_page/pages/member/index/index'
						url: `/mine/pages/vip/vipCenter`,
                    });
                    console.log('跳转----我的-付费会员');
                    break;
            }
            // this.getIsRead()
        },

        //正常去营销获客卡券
        goYxhkCard() {
            if (this.marketingSwitch) {
				console.log('营销获客正常,走外包8081逻辑');
				uni.navigateTo({
				    url: '../../../mine/pages/cardVoucherYx/cardVoucherYx'
				});
            } else {
               console.log('营销获客挂了,走7100逻辑');
               uni.navigateTo({
                   url: '../../../mine/pages/cardVoucher/cardVoucher'
               });
            }
        },

        // 判断订单状态
        judgmentState(e: any) {
            let type = '';
            this.orderStatus.map((item: any) => {
                if (e == item.state) {
                    type = item.val;
                }
            });
            return type;
        },

        // 校验是否在充电和未支付订单
        check(relationid: any, id: any) {
            const tmp = this;
            tmp.singleRead(id);
            myBillDetails({
                id: relationid
            }).then((res: any) => {
                if (res.code == 0) {
                    //item.type==1?'充电结束':item.type==2?'去支付
                    let statu = Number(this.judgmentState(res.data.billStatus));
                    console.log(statu);
                    if (statu == 1) {
                        uni.navigateTo({
                            url: `/echartsPages/pages/power/power?busId=${res.data.busId}&pileNo=${res.data.pileNumber}&gunNo=${res.data.gunNumber}`
                        });
                    } else {
                        if (tmp.marketingSwitch) {
                            uni.navigateTo({
                                url: `../../../orderSub/pages/orderSettlement/orderSettlement?busId=${res.data.busId}`
                            });
                        } else {
                            uni.navigateTo({
                                url: `../../../orderSub/pages/orderSettlementYxhk/orderSettlement?busId=${res.data.busId}`
                            });
                        }
                    }
                }
            });
            // if(!i){
            //     myBillPage({
            //         billStatusList: [11,13],
            //         current: 1,
            //         endTime: null,
            //         memberType: "null",
            //         size: 10,
            //         startTime: null,
            //     }).then((res:any)=>{
            //         if(res.code ==0){
            //           if(res.data.records.length){
            //             wx.navigateTo({
            //                 url:`../../../orderSub/pages/orderSettlement/orderSettlement?busId=${res.data.records[0].busId}`
            //               })
            //             //   tmp.singleRead(id)
            //           }else{
            //             querMemberStatus().then((res:any)=>{
            //                 if(res.code== 0){
            //                     if (res.data.ifCharging) {
            //                        wx.navigateTo({
            //                             url: `../../pages/power/power?busId=${res.data.billList[0].busId}&pileNo=${res.data.billList[0].pileNo}&gunNo=${res.data.billList[0].gunNo}`
            //                         })
            //                         // tmp.singleRead(id)
            //                     }
            //                 }
            //             })
            //           }

            //         }
            //       })

            // }
        },

        // getMessagePage(index: any){
        //     const tmp = this
        //     messagePage({
        //       current:tmp.data.page,
        //       pageSize:10
        //     }).then((res: any) =>{
        //        if(res.code == 0){
        //            if(res.code == 0){
        //                 const total = res.data.total
        //                 const pageNum = Math.ceil(total/10)
        //                 let messageList;
        //                 switch(index){
        //                     // 下拉刷新
        //                     case 1:
        //                         messageList = res.data.records
        //                         wx.hideNavigationBarLoading() //在标题栏中隐藏加载图标
        //                         wx.stopPullDownRefresh()
        //                     break;
        //                     // 上拉加载或初始化页面
        //                     case 2:
        //                         messageList = tmp.data.messageList.concat(res.data.records)
        //                     break;
        //                 }
        //                 tmp.setData({
        //                     messageList,
        //                     pageNum
        //                 })
        //            }
        //        }
        //     })
        // },
        getMessagePage(index: any) {
            messagePage({
                current: this.page,
                pageSize: 10000
            }).then((res: any) => {
                console.log(res.data, 'ooooooooooo');
                if (res.code == 0) {
                    res.data.records.forEach((element) => {
                        element.isNewType = 1;
                    });
                    this.setData({
                        oldMessageList: res.data.records
                    });
                    getMessagePageApi({
                        current: 1,
                        size: 10000,
                        sellerId: app.globalData.sellerId
                    })
                        .then((res: any) => {
                            console.log(res.data, 'nnnnnnnnn');
                            if (res.code == 200) {
                                res.data.records.forEach((element) => {
                                    element.isNewType = 2;
                                });
                                this.setData({
                                    newMessageList: res.data.records
                                });

                                // 合并收支记录
                                this.mergeData();
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                            // 合并收支记录
                            this.mergeData();
                        });
                }
            });
        },

        //合并收支记录
        mergeData() {
            let messageLists = [...this.oldMessageList, ...this.newMessageList];
            messageLists.sort((a, b) => {
                let t1 = new Date(Date.parse(a.createTime.replace(/-/g, '/')));
                let t2 = new Date(Date.parse(b.createTime.replace(/-/g, '/')));
                return t2.getTime() - t1.getTime();
            });
            console.log(messageLists, '总的消息.........');
            this.setData({
                messageList: messageLists
            });
        },

        // 一键阅读按钮
        read() {
            messageRead({}).then((res: any) => {
                if (res.code == 0) {
                    console.log('一键已读7100');
                    this.setData({
                        page: 1
                    });
                    //  this.getIsRead()

                    getMessageReadAllApi({
                        sellerId: app.globalData.sellerId
                    }).then((res: any) => {
                        if (res.code == 200) {
                            console.log('一键已读8081');
                            this.getMessagePage();
                        } else {
                            console.log('一键阅读失败!!!!!!!');
                            this.getMessagePage();
                        }
                    });
                }
            });
        },

        //单个阅读方法7100
        singleRead(id: any) {
            messageRead({
                messageId: id
            }).then((res: any) => {
                if (res.code == 0) {
                    console.log('7100信息,已读一个...');
                    this.getMessagePage();
                }
            });
        },

        //单个阅读方法8081
        singleReadNew(id: any) {
            console.log(id);
            getMessageReadApi({
                id: id
            }).then((res: any) => {
                if (res.code == 200) {
                    console.log('8081信息,已读一个...');
                    this.getMessagePage();
                }
            });
        },

        /**
         * 页面上拉触底事件的处理函数
         */
        // onReachBottom() {
        //     let  page = this.data.page + 1; //获取当前页数并+1
        //     if(this.data.page < this.data.pageNum){
        //         this.setData({
        //             page
        //         })
        //         this.getMessagePage(2)
        //     }
        // },
        // /**
        //  * 页面相关事件处理函数--监听用户下拉动作
        // */
        // onPullDownRefresh() {
        //     this.data.page = 1
        //     if(this.data.messageList.length){
        //         wx.showNavigationBarLoading(); //在标题栏中显示加载图标
        //         this.getMessagePage(1)
        //     }
        // },
        //获取阅读状态7100
        getIsRead() {
            uni.showLoading({
                title: '加载中'
            });
            const tmp = this;
            isRread({})
                .then((res: any) => {
                    console.log(res, '7100信息是否有消息阅读');
                    if (res.code == 0) {
                        tmp.setData({
                            readStatus: res.data,
                            page: 1,
                            loading: true
                        });
                        this.getMessagePage(1);
                    }
                    uni.hideLoading();
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        //获取信息阅读状态 营销获客
        getIsReadYx() {
            // true-有未读消息,false-无未读消息
            isRread({})
                .then((res: any) => {
                    console.log(res, '获取7100未阅读消息,true-有未读消息,false-无未读消息--------');
                    if (res.code == 0) {
                        if (res.data == true) {
                            console.log('7100---------------------', res.data);
                            this.setData({
                                oldStatus: true
                            });
                        } else {
                            this.setData({
                                oldStatus: false
                            });
                            console.log('7100没有需要阅读的信息....');
                        }

                        //外包接口判断消息
                        getMessageStatus({
                            sellerId: app.globalData.sellerId
                        })
                            .then((res: any) => {
                                // console.log(res, '获取8081外包未阅读消息,0是没有要阅读的,非0代表未阅读的数量--------');
                                if (res.code == 200) {
                                    if (res.data > 0) {
                                        console.log('8081---------------------', res.data);
                                        this.setData({
                                            newStatus: true
                                        });
                                    } else {
                                        this.setData({
                                            newStatus: false
                                        });
                                        console.log('8081没有需要阅读的信息------------');
                                    }

                                    //新老接口一起判断阅读状态
                                    if (this.oldStatus == true || this.newStatus == true) {
                                        console.log(this.oldStatus, this.newStatus, '有未阅读信息啊..........');
                                        this.setData({
                                            readStatus: true
                                        });
                                    } else {
                                        this.setData({
                                            readStatus: false
                                        });
                                        console.log(this.oldStatus, this.newStatus, '合并起来后,没有需要阅读的信息....');
                                    }
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    } else {
                        console.log('7100阅读接口报错了...');
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>
<style lang="less">
@import '../../../commin/commin.less';
page {
    background-color: @text-color6;
}
.message-list {
    .margins (32rpx,32rpx,32rpx,32rpx);
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    .borders (2rpx,@white-color);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    z-index: 9;
    .message-list-item {
        border-bottom: 1rpx solid @text-color5;
        font-family: PingFang SC;
        .margins (auto,32rpx,auto,32rpx);
        .message-list-header {
            /* display: flex;*/
            /* justify-content: space-between;*/
            /* align-items: center;*/
            margin-top: 32rpx;
            .message-list-header-left {
                display: flex;
                /* justify-content: start;*/
                /* align-items: center;*/
                flex-wrap: wrap;
                position: relative;
                .message-list-icon {
                    .kuangao (48rpx,48rpx);
                }
                .icon-badge {
                    .position (absolute,-14rpx,auto,auto,48rpx);
                    .kuangao (14rpx,14rpx);
                    background: @orange;
                    border-radius: 7rpx;
                }
                .message-list-title {
                    margin-left: 26rpx;
                    .kuan (510rpx);
                    .yiman (1);
                    .fontsize (30rpx);
                    font-weight: bold;
                    color: @text-color1;
                }
            }
            /* .message-list-header-right{*/
            /*     .fontsize(24rpx);message-list-content*/
            /*     font-weight: 400;*/
            /*     color: @text-color3;*/
            /* }*/
            .message-list-time {
                /* .margins(15rpx,auto,0rpx,64rpx);*/
                .margins (0rpx,auto,0rpx,74rpx);
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #606266;
            }
        }
        .message-list-content {
            .margins (15rpx,auto,32rpx,64rpx);
            .kuan (565rpx);
            .fontsize (28rpx);
            font-weight: 400;
            color: #18181a;
            .yiman (1);
        }
    }
    .message-list-item:nth-last-child(1) {
        border-bottom: none;
    }
}
.loading {
    // @textalign();
    text-align: center;
}
.read {
    z-index: 99;
    .position (fixed,auto,32rpx,32rpx,auto);
    // @flexs();
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    .kuangao (120rpx,120rpx);
    background: linear-gradient(0deg, #1487fa, #81c0ff);
    box-shadow: 0rpx 8rpx 8rpx 1rpx rgba(166, 171, 179, 0.29);
    border-radius: 50%;
    .fontsize (22rpx);
    font-family: PingFang SC;
    font-weight: 500;
    color: @white-color;
    .read-icon {
        .kuangao (39rpx,45rpx);
    }
    .read-text {
        margin-top: 9rpx;
    }
}
</style>
